<template>
    <div>
        <el-card>
            <div>
                <el-button class="upload" type="primary" size="small" @click="addDialogVisible=true"><i class="el-icon-upload"></i> 上传文件</el-button>
                <el-table
                        :data="fileData"
                        height="450"
                        border
                        style="width: 100%"
                        :cell-style="{'text-align' :'center'}"
                        :header-cell-style="{'text-align' :'center'}">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="bucketName"
                            label="空间"
                    width="100">
                    </el-table-column>
                    <el-table-column
                            prop="fileName"
                            label="文件名"
                            width="350">
                    </el-table-column>
                    <el-table-column
                            prop="original"
                            label="原文件名"
                    width="230">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="文件类型">
                    </el-table-column>
                    <el-table-column
                            prop="fileSize"
                            label="文件大小">
                    </el-table-column>
                    <el-table-column
                            prop="createBy"
                            label="上传人员">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="上传时间">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="primary" class="el-icon-view el-icon--right" @click="see(scope.row)">预览
                            </el-link>
                            <el-link type="primary" class="el-icon-download el-icon--right"
                                     @click="download(scope.row)">下载
                            </el-link>
                            <el-link type="danger" class="btn" icon="el-icon-delete" @click="deleteFile(scope.row)">删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        :total="pagingData.total"
                        background
                        layout="total,sizes, prev, pager, next"
                        :page-size="pagingData.size"
                        :page-sizes="[1, 5, 10, 20, 30, 50]"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagingData.current"
                ></el-pagination>
                <el-dialog title="新增" :before-close="handleClose" :visible.sync="addDialogVisible" width="50%">
                    <el-upload
                            class="upload-demo"
                            :action="fileUploadUrl"
                            name="files"
                            show-file-list
                            :headers="headers"
                            :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="addDialogVisible = false,init()">取 消</el-button>
						</span>
                </el-dialog>
            </div>
        </el-card>


    </div>
</template>

<script>
    import {deleteFile, findAllfile, previewFile} from "../../../api/admin/system/file";
    import {findUserPage} from "../../../api/admin/permissions/user";
    import {getToken} from "../../../utils/auth";

    export default {
        name: "file",
        data() {
            return {
                fileData: [],
                seeDialogVisible: false,
                searchData: {
                    title: '',
                    user: '',
                    businessType: '',
                    startDate: '',
                    endDate: '',
                    logType: '1'
                },
                // 分页数据
                pagingData: {
                    current: 1,
                    total: 0,
                    size: 20,
                },
                times: '',
                userOptions: [],
                fileUploadUrl: '',
                fileList: [],
                addDialogVisible: false,
                headers:''

            }
        },
        created() {
            this.init();
            const settings = require('../../../config/settings');
            this.headers = {'Authorization':getToken()}
            this.fileUploadUrl = settings.env == 'prod' ? settings.baseUrl.production : settings.baseUrl.development + "/admin/demo-file/uploadFiles";
            findUserPage({}).then(res => {
                this.userOptions = res.data.data.records;
            })
        },
        methods: {
            //初始化方法
            init() {
                let search = {
                    ...this.searchData,
                    size: this.pagingData.size,
                    current: this.pagingData.current,
                }
                findAllfile(search).then(res => {
                    this.fileData = res.data.data.records;
                    this.pagingData.total = res.data.data.total
                    this.pagingData.size = res.data.data.size
                    this.pagingData.current = res.data.data.current
                })
            },
            //文件预览
            see(row) {
                if (row.type == "pdf" || row.type == "jpg" || row.type == "png") {
                    previewFile(row.fileName).then(res => {
                        window.open(res.data.data, "top")
                    })
                } else {
                    this.$message.warning('预览仅支持pdf和图片类型!')

                }


            },
            //条件搜索
            keywordSearch() {
                this.init();
            },
            //删除文件
            deleteFile(row) {
                deleteFile(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('删除文件成功')
                        this.init()
                    } else {
                        this.$message.error('删除文件失败')
                    }
                })
            },
            //文件下载
            download(row) {
                const settings = require('../../../config/settings');
                window.location.href = settings.env == 'prod' ? settings.baseUrl.production : settings.baseUrl.development + "/admin/demo-file/downloadFile?fileName=" + row.fileName;
            },
            // 页码切换
            handleSizeChange(val) {
                this.pagingData.size = val
                this.keywordSearch()
            },
            // 当前页切换
            handleCurrentChange(val) {
                this.pagingData.current = val
                this.keywordSearch()
            },
            //关闭新增表单框
            handleClose(done) {
                this.init();
                done();
            },
            /**
             * 重置搜索框
             */
            clean() {
                this.searchData = {}
                this.times = []
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/style/publicPage.scss";

    a.btn {
        margin: 0 5px;
    }
    .upload{
        margin-bottom: 10px;
    }
</style>
